<template>
  <view class="wrap">
    <view class="list" v-if="historyList.length">
      <view
        class="l-leftCenter list-item"
        v-for="(item, index) in historyList"
        :key="index"
      >
        <text class="time">{{ item.date.split(" ")[0] }}</text>
        <text class="l-flex1 l-ml-10 weight">{{
          formatWeight(item.weight)
        }}</text>
        <text class="l-flex1 l-ml-10 type">{{ item.type | formatType }}</text>
        <text class="btn-delete" @click="onDeleteItem(index)">删除</text>
      </view>
    </view>
    <u-empty
      v-else
      mode="list"
      icon="http://cdn.uviewui.com/uview/empty/list.png"
      textSize="28rpx"
      iconSize="200rpx"
      width="400rpx"
      height="400rpx"
      marginTop="200rpx"
    >
    </u-empty>
    <u-popup
      :show="openDeleteConfirm"
      mode="center"
      @close="openDeleteConfirm = false"
      style="flex: none"
      bgColor="transparent"
      :closeOnClickOverlay="false"
      class="custom-confirm-popup"
    >
      <view class="l-px-10 l-py-20 delete-confirm-popup">
        <u--text
          text="删除后不可恢复"
          align="center"
          bold
          size="56rpx"
        ></u--text>
        <u--text
          margin="20rpx 0 0"
          type="warning"
          :text="activeItem.date&&activeItem.date.slice(0, 10)"
          size="46rpx"
          align="center"
        ></u--text>
        <u--text
          margin="10rpx 0 0"
          type="warning"
          :text="formatWeight(activeItem.weight)"
          size="46rpx"
          align="center"
        ></u--text>
        <u--text
          margin="10rpx 0 0"
          type="warning"
          :text="activeItem.type | formatType"
          size="46rpx"
          align="center"
        ></u--text>
        <view class="l-mt-16 l-betweenCenter">
          <view class="btn-large btn-cancel" @click="openDeleteConfirm = false">取消</view>
          <view class="btn-large btn-confirm" @click="onConfirmDelete">确定</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      unit: "",
      openDeleteConfirm: false,
      historyList: [],
      activeIndex: 0,
    };
  },
  computed: {
    activeItem() {
      return this.historyList[this.activeIndex] || {};
    },
  },
  onShow() {
    this.unit = String(uni.getStorageSync("unit"));
    this.getHistoryList();
  },
  methods: {
    formatWeight(weight) {
      if (this.unit === "1") {
        return weight / 2 + "kg";
      }
      return weight + "斤";
    },
    getHistoryList() {
      const history = uni.getStorageSync("history");
      this.historyList = history;
    },
    onDeleteItem(index) {
      this.activeIndex = index;
      this.openDeleteConfirm = true;
    },
    onConfirmDelete() {
      this.openDeleteConfirm = false;
      setTimeout(() => {
        this.$store.dispatch("user/deleteRecord", { ...this.activeItem });
        this.historyList.splice(this.activeIndex, 1);
        uni.setStorageSync("history", this.historyList);
        this.getHistoryList();
      }, 300);
    },
  },
};
</script>

<style lang="scss" scoped>
.wrap {
  .list {
    padding: 26rpx;
    .list-item {
      min-height: 180rpx;
      padding: 30rpx 0;
      border-bottom: 2rpx solid #e5e5e5;
      font-size: $uni-font-size-lg;
      .time {
        color: #999999;
        width: 260rpx;
      }
      .weight {
        color: #999999;
      }
      .type {
        color: #999999;
      }
      .btn-delete {
        margin-left: 20rpx;
        color: $uni-color-error;
      }
    }
  }
  .delete-confirm-popup {
    width: 680rpx;
    border-radius: 20rpx;
    background-color: #fff;
  }
  .btn-cancel {
    width: 300rpx;
  }
  .btn-confirm {
    width: 300rpx;
    background: #ffffff;
    border: 2rpx solid #999;
    color: #999;
  }
}
</style>
